<template>
  <div>
    <div class="big">
      <div class="top">
        <img src="../img/icon.png" alt="" />
      </div>
    </div>
    <div class="search" @click="$router.push({ path: '/search' })">
      <div class="sbox">
        <div class="sboxleft"></div>
        <div class="sboxright"><p>搜索一下</p></div>
      </div>
    </div>
    <div class="box">
      <h3>精选推荐</h3>
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <ZuiXin v-for="item in list" :key="item.id" :item="item"> </ZuiXin>
      </van-list>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { List, Loading } from "vant";
import ZuiXin from "@/components/ZuiXin.vue";
Vue.use(Loading);
Vue.use(List);
export default {
  components: {
    ZuiXin,
  },
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
      x: 10,
    };
  },
  created() {
    this.axios
      .get("https://apis.netstart.cn/douguo/home/recommended/30/10")
      .then((res) => {
        this.list = res.data.result.list;
        // console.log(this.list);
      });
    // this.axios
    //   .get("https://apis.netstart.cn/douguo/home/recommended/5/10")
    //   .then((re) => {
    //     this.texts = re.data.result.list;
    //     // console.log(this.list);
    //   });
  },
  methods: {
    onLoad() {
      setTimeout(() => {
        if (this.refreshing) {
          this.refreshing = false;
        }
        this.loading = false;
      }, 1000);
      if (this.loading == true) {
        this.finished = true;
        if (this.index == 0) {
          this.axios
            .get(
              `https://apis.netstart.cn/douguo/home/recommended/${this.x}/10`
            )
            .then((res) => {
              // this.list = res.data.result.list;
              // console.log(this.list);
              for (let i = 0; i < res.data.result.list.length; i++) {
                this.list.push(res.data.result.list[i]);
              }
            });
          this.index++;
          this.x += 1;
        }
      }
    },
    onRefresh() {
      // 清空列表数据
      this.finished = false;

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.onLoad();
    },
  },
};
</script>

<style lang="scss" scoped>
.big {
  width: 100vw;
  overflow: hidden;
  height: 15vh;
  background-color: #f5f5f5;
  .top {
    width: 130rem;
    height: 73rem;
    margin: 10rem auto 10rem;
  }
}
.search {
  .sbox {
    margin: 0 auto;
    width: 70vw;
    height: 32rem;
    border: 1rem solid #ff5152;
    border-radius: 30rem;
    display: flex;
    .sboxleft {
      width: 75%;
      height: 100%;
    }
    .sboxright {
      width: 25%;
      border-radius: 0 15rem 15rem 0;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #f5f5f5;
      background-color: #ff5152;
    }
  }
}
.box {
  h3 {
    margin:10rem 0 10rem 18rem;
    font-size: 13rem;
    font-weight: 700;
    border-left: 3rem solid #ff5152;
    padding-left: 5rem;
  }
}
.van-list {
  margin: 15rem 0 35rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}
.van-search {
  background-color: #f5f5f5;
}
input {
  background-color: #f5f5f5;
}
.littlebox {
  .tu {
    width: 160rem;
    height: 153rem;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .title {
    width: 160rem;
  }
}
</style>
